<template>
  <view class="login">
    <view class="login-box">
      <image class="logo" src="https://img.qiananquang.com/minapp/logo.png" mode=""></image>
      <view class="login-box-title">
        <text class="slogan">忘记密码!</text>
        <text class="slogan2">通过手机号重置密码</text>
      </view>
      <view class="login-userinfo">
        <view class="login-nickname">
          <text>手机号码： </text>
          <view class="login-input">
            <!-- <input type="nickname" /> -->

            <uv-input v-model="userinfo.phone" placeholder="请输入手机号码" :customStyle="{
              'fontSize': '30rpx',
              'fontWeight': '700',
              'border': 'none'
            }">
              <!-- vue3模式下必须使用v-slot:suffix -->
              <template v-slot:suffix>
                <uv-code @end="end" @start="start" ref="code" :seconds="seconds" @change="codeChange"></uv-code>
                <uv-button @click="getCode" :text="tips" size="normal" type="success"></uv-button>
              </template>
            </uv-input>
          </view>
        </view>
        <view class="login-nickname">
          <text>验证码： </text>
          <view class="login-input">
            <!-- <input type="nickname" /> -->
            <uv-input v-model="userinfo.code" placeholder="请输入6位验证码" :customStyle="{
              'fontSize': '30rpx',
              'fontWeight': '700',
              'border': 'none'
            }">
            </uv-input>
          </view>
        </view>
        <view class="login-nickname">
          <text>新密码 </text>
          <view class="login-input">
            <uv-input type="password" border="none" :fontSize="'30rpx'" :customStyle="{
              'fontSize': '30rpx',
              'fontWeight': '700'
            }" v-model="userinfo.password" placeholder="请输入密码" />
          </view>
        </view>
        <view class="login-nickname">
          <text>确认新密码： </text>
          <view class="login-input">
            <uv-input type="password" border="none" :fontSize="'30rpx'" :customStyle="{
              'fontSize': '30rpx',
              'fontWeight': '700'
            }" v-model="userinfo.confirmPassword" placeholder="请输入密码" />
          </view>
        </view>
      </view>
      <view class="login-btn">
        <button class="wxlogin" @click="loginBtn">重置密码</button>
        <!-- <button open-type="getRealtimePhoneNumber"
					@getrealtimephonenumber="getrealtimephonenumber">微信一键登录</button> -->
      </view>

    </view>
  </view>
</template>

<script>
import {
  getWxPhone,
  getWxLogin,
  getPhoneCode,
  postVerifyPhone,
  forgetPwd,
  getDetail,
  putUserUpdate,
  login
} from '@/http/user.js'
export default {
  name: "loginPopup",
  data() {
    return {
      userinfo: {
        avatar: '',
        nickname: ' ',
        gender: null,
        phone: '',
        password: '',
        confirmPassword: ''
      },
      tips: '获取验证码',
      seconds: 60,
      checkboxValue: false,
      rules: {

      }
    };
  },
  methods: {
    onChooseAvatar(val) {
      this.userinfo.avatar = val.detail.avatarUrl
    },
    nickBlur(val) {
      console.log(val.detail.value, 0, val);
      this.userinfo.nickname = val.detail.value
    },
    getrealtimephonenumber(val) {
      console.log(val);
    },
    loginBtn(val) {

      if (!this.userinfo.code || this.userinfo.code.length < 4) {
        return uni.showToast({
          title: '请输入正确的验证码',
          icon: 'none',
        })
      }
      if (!this.userinfo.password || !this.userinfo.confirmPassword) {
        return uni.showToast({
          title: '请输入密码和确认密码',
          icon: 'none',
        })
      }
      if (this.userinfo.password !== this.userinfo.confirmPassword) {
        return uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none',
        })
      }
      if (this.userinfo.password.length < 8) {
        return uni.showToast({
          title: '密码不能低于8位',
          icon: 'none',
        })
      }
      uni.clearStorageSync()
      let params = {
        authCode: this.userinfo.code,
        phone: this.userinfo.phone,
        password: this.userinfo.password,
      }
      forgetPwd(params).then(res => {
        uni.showModal({
          title: '提示',
          content: '重置密码成功，请重新登录',
          showCancel: false,
          confirmText: '确定',
          success: ({ confirm, cancel }) => {
            if (confirm) {
              uni.navigateBack()
            }
          }
        })
      })
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (!/^1\d{10}$/.test(this.userinfo.phone)) {
        return uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
      }
      if (this.$refs.code.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        getPhoneCode({
          phone: this.userinfo.phone
        }).then(res => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$uv.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.code.start();
          // 通知验证码组件内部开始倒计时
        })

      } else {
        uni.showToast({
          title: '倒计时结束后再发送',
          icon: 'none'
        });
      }
    },
    end() {
      uni.$uv.toast('倒计时结束');
    },
    start() {
      uni.$uv.toast('倒计时开始');
    }

  }
}
</script>

<style lang="scss" scoped>
page {
  background: linear-gradient(180deg, #FFDDDA, rgba(237, 237, 237, 0));
  background-size: 100% 345rpx;
  background-repeat: no-repeat;
  background-color: #F7F6F9;
}

.login {
  background: url('https://img.qiananquang.com/minapp/loginbg.png') no-repeat top left / 100% 310rpx;
}

.login-box {


  padding: 40rpx 70rpx 30rpx 70rpx;

  .logo {
    width: 135rpx;
    height: 135rpx;
    // background: #FB4939;
  }

  .login-box-title {
    // text-align: center;
    margin-top: 50rpx;

    text {
      display: block;
    }

    .slogan {
      font-weight: 700;
      font-size: 46rpx;
      color: #2C2821;
      margin-bottom: 10rpx;
    }

    .slogan2 {
      font-weight: 500;
      font-size: 24rpx;
      color: #CCCBCB;
      margin-top: 15rpx;
    }
  }

  .login-userinfo {
    margin-top: 40rpx;

    .avatar {
      background: linear-gradient(180deg, #fc3826FF, #f49d95FF);
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .iconfont {
      color: #fff;
      font-size: 80rpx;
    }

    .login-nickname {
      // width: 450rpx;
      margin-bottom: 30rpx;

      text {
        font-weight: 700;
        font-size: 30rpx;
        color: #2F3133;
        display: block;
        margin-bottom: 10rpx;
      }

      .login-input {
        margin: 10rpx 0;
        // padding: 10rpx 0;
        border-bottom: 4rpx solid #e7e7e7;
      }

      input {
        height: 80rpx;
        line-height: 80rpx;
        font-size: 30rpx;
        font-weight: 700;
      }
    }
  }

  .login-btn {
    margin-top: 80rpx;

    button {
      width: 520rpx;
      height: 100rpx;
      line-height: 100rpx;
      border-radius: 50rpx;
      font-weight: 700;
      font-size: 30rpx;
      color: #FFFFFF;
      margin-bottom: 30rpx;
    }

    .wxlogin {
      background: linear-gradient(180deg, #FC3826, #F49D95);
    }

    .phonelogin {}
  }
}

.login-tips {
  font-weight: 600;
  font-size: 24rpx;
  color: #A5A5A5;
  text-align: center;
  margin-top: 30rpx;
}

.agreement-box {
  font-weight: 600;
  font-size: 24rpx;
  color: #A5A5A5;
  text-align: center;
  margin-top: 30rpx;

  .agreement-txt {
    display: flex;
  }

  .agreement {
    color: #FD3523FF;
  }
}
</style>